<template>
    <div class="create">

        <van-notify id="editor-notify" />
        <van-dialog id="van-dialog" />
        <div class="tips">点击各个部分可以编辑哦！</div>
        <div class="card-outside">
            <div class="card-outer">
                <image v-if="content.type !== 'image'" class="background" :src="content.image"></image>
                <card class="card" :content="content" @click="change"></card>
            </div>
        </div>
        <tabbar class="tabbar" @moreInfo="InfoEditor.show = true"></tabbar>
        <van-calendar :min-date="minDate()" v-if="calendar.show" :show="true" @close.native="calendar.show = false"
            @confirm.native="selectTime" />

        <van-action-sheet :show="editing.show" @clickOverlay.native="editing.show = false" class="overlay">
            <editor :value="editing.value" :label="editing.label" @save="SaveEdit"></editor>
        </van-action-sheet>
        <van-overlay :show="InfoEditor.show" class="row" z-index="100">
            <info-editor class="row info-editor" :content="content" @close.native="InfoEditor.show = false"
                @selectTime="(InfoEditor.show = false), (calendar.show = true)"></info-editor>
        </van-overlay>
    </div>
</template>

<script>
import { mapState } from "vuex";
import card from "@/pages/index/card.vue";
import editor from "./editor.vue";
import vanActionSheet from "@/wxcomponents/weapp/dist/action-sheet/index";
import vanCalendar from "@/wxcomponents/weapp/dist/calendar/index";
import infoEditor from "./InfoEditor.vue";
import tabbar from "./tabbar.vue";
import $store from "@/store/index.js";
import { pictureChoose } from "@/utils/pictureChoose.js";

const Translate = {
    title: "标题",
    description: "文本描述",
    please: "祝福语",
};
export default {
    components: {
        infoEditor,
        card,
        vanCalendar,
        vanActionSheet,
        editor,
        tabbar,
    },

    data() {
        return {
            InfoEditor: { show: false },
            calendar: { show: false },
            editing: {
                contentKey: "",
                value: "",
                show: false,
            },
        };
    },
    computed: {
        ...mapState({
            content: (state) => state.xinyuqian.editingContent,
            isManager: (state) => state.user.userInfo.isManager
        }),

        "editing.label"() {
            if (this.editing.contentKey) {
                return Translate[this.editing.contentKey];
            } else {
                return "";
            }
        },
    },

    methods: {
        minDate() {
            console.log(this.isManager);
            const oneYear = 31536000000
            return this.isManager ? new Date().getTime() - 2 * oneYear : Date.now()
        },
        selectTime({ detail }) {
            this.calendar.show = false;
            console.log("选中日期", detail, detail.getTime());
            $store.commit("changeEditingXin", {
                date: detail.getTime(),
            });
        },
        SaveEdit({ detail }) {
            console.log(detail);
            $store.commit("changeEditingXin", {
                [this.editing.contentKey]: detail.__args__[0],
            });

            this.editing.show = false;
        },

        change(tagname) {
            console.log(tagname);
            switch (tagname) {
                case "image":
                    return pictureChoose().then((url) => {
                        $store.commit("changeEditingXin", { image: url });
                    });
                case "time":
                    return (this.calendar.show = true);
                default:
                    this.editing.contentKey = tagname;
                    this.editing.value = this.content[tagname];
                    this.editing.show = true;
            }
        },
        imageUpload({ tempFilePaths, tempFiles }) {
            console.log(tempFilePaths[0]);
        },
    },
};
</script>

<style lang="less" scoped>
.tabbar {
    width: 100%;

    z-index: 10;
}

.info-editor {
    height: 100%;
    width: 100%;
}

.tips {
    width: 100%;
    background-color: antiquewhite;
    color: black;
    text-align: center;
    font-size: 32rpx;
    padding: 8rpx 0;
}

.background {
    position: absolute;
    height: 100%;
    width: 100%;
    filter: blur(4px);
    background-size: length;
}

.card-outside {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background-color: #fafafa;
    width: 100%;

    .card-outer {
        overflow: hidden;
        position: relative;
        width: 80%;
        padding: 20rpx 18rpx;
        display: flex;
        justify-content: center;
        align-items: center;


        .card {
            width: 100%;
            height: 100%;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        }
    }
}

.create {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.uploadImage {
    height: 180rpx;
    width: 180rpx;
}

.uploader {
    width: 100%;
    height: 100%;
}

#canvas1,
.share__canvas {
    position: absolute;
    bottom: -100%;
    left: 0;
}
</style>
